<script setup>

</script>

<template>
  <div class="brand-group">
    <div class="logo">
      <!-- 使用SVG绘制公司商标 -->
      <svg width="40" height="40" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"
        style="color: white">
        <path d="M64 24a40 40 0 1 1 0 80 40 40 0 0 1 0-80z" stroke="#ffffff" stroke-width="8" />
        <g stroke="#eeb656" stroke-width="6" stroke-linecap="round">
          <path d="M44 64c0-12 16-12 20-8 4-4 20-4 20 8" fill="none" />
          <path d="M44 64c0 12 16 12 20 8 4 4 20 4 20-8" fill="none" />
        </g>
        <circle cx="64" cy="64" r="6" fill="#eeb656" />
      </svg>
    </div>
    <span class="company-name">{{ $t("companyName") }}</span>
  </div>
</template>

<style scoped>
.brand-group {
  display: flex;
  align-items: center;
  margin-left: 12vw;
  gap: 2vw;
  flex-shrink: 0;
}

.logo {
  width: 40px;
  height: 40px;
  background: #2196f3;
  border-radius: 10px;
}

.company-name {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 600;
  color: #2196f3;
  white-space: nowrap;
}
</style>